<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //创建ajax引擎对象
        //客户端页面委托ajax引擎代理
        //ajax引擎发送请求到服务端
        //ajax引擎监听自身和服务端状态的变化
        //监听到成功完成状态，通过回调函数局部更新客户端页面
        function doAjax() {
            //创建ajax引擎对象
            var xmlhttp;
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //客户端页面委托ajax引擎代理
            xmlhttp.open("GET", "ServletAjax?id=110", true);
            //ajax引擎发送请求到客户端
            xmlhttp.send();
            //ajax引擎监听自身和客户端状态的变化
            //通过onreadystatechange事件监听服务端的状态和自身的状态
            //监听到成功完成状态，通过回调函数局部更新客户端页面
            xmlhttp.onreadystatechange = function () {
                //xmlhttp.readyState  ajax引擎状态 共有5种状态
                //xmlhttp.status      服务器状态   100~600
                if(xmlhttp.readyState ==4 && xmlhttp.status==200) {
                    //xmlhttp.responseText  服务器传过来的值
                    document.getElementById("showMsg").innerText = xmlhttp.responseText;
                }
            }

        }
    </script>
</head>
<body>
<button onclick="doAjax()">点击</button>
<label id="showMsg"></label>
</body>
</html>